<template>
  <div id="app">
    <router-view />
    <mt-tabbar v-model="selected">
      <mt-tab-item id="home">
        <img
          slot="icon"
          src="./assets/images/shouye.png"
          v-show="selected != 'home'"
        />
        <img
          slot="icon"
          src="./assets/images/shouye_red.png"
          v-show="selected == 'home'"
        />
        首页
      </mt-tab-item>
      <mt-tab-item id="sort">
        <img
          slot="icon"
          src="./assets/images/fenlei.png"
          v-show="selected != 'sort'"
        />
        <img
          slot="icon"
          src="./assets/images/fenlei_red.png"
          v-show="selected == 'sort'"
        />
        分类
      </mt-tab-item>
      <mt-tab-item id="shop">
        <img
          slot="icon"
          src="./assets/images/gouwuche.png"
          v-show="selected != 'shop'"
        />
        <img
          slot="icon"
          src="./assets/images/gouwuche_red.png"
          v-show="selected == 'shop'"
        />
        购物车
      </mt-tab-item>
      <mt-tab-item id="member">
        <img
          slot="icon"
          src="./assets/images/wode.png"
          v-show="selected != 'member'"
        />
        <img
          slot="icon"
          src="./assets/images/wode_red.png"
          v-show="selected == 'member'"
        />
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: "home",
    };
  },
  watch: {
    selected(newVal) {
      // eslint-disable-next-line eqeqeq
      if (newVal == "home"&&this.$route.path!="/home") {
        this.$router.push("/home");
        // eslint-disable-next-line eqeqeq
      } else if (newVal == "sort"&&this.$route.path!="/sort") {
        this.$router.push("/sort");
        // eslint-disable-next-line eqeqeq
      } else if (newVal == "shop"&&this.$route.path!="/shop") {
        this.$router.push("/shop");
        // eslint-disable-next-line eqeqeq
      } else if (newVal == "member"&&this.$route.path!="/member") {
        this.$router.push("/member");
      }
    },
  },
};
</script>

<style lang="scss">
body {
  margin: 0;
  padding: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100vh;
  width: 100%;
}
#app .mint-tabbar > .mint-tab-item.is-selected {
  background: none;
  color: #d81e06;
}
</style>
